import React, { useEffect,memo } from 'react';
import { connect } from 'react-redux';
import { categoryDetail,categoryDetailList } from '../../../store/actions';
import Header from '../../../components/Header';
import { Tabs } from 'antd-mobile';
import style from './index.module.scss';
import NewGoods from '../../../components/NewGoods';
const WrapHeader = memo(Header);
const WrapNewGoods = memo(NewGoods);
interface Iprops {
    getDetail: (id: string) => void,
    getDetailList: (page?:string,size?:string,categoryId?:string) => void,
    brotherCategory: Array<object>,
    data: Array<object>,
    match: any,
    currentCategory: { [key: string]: any }
}

const Cart: React.FC<Iprops> = props => {

    useEffect(() => {
        const { match: { params: { id } } } = props;
        props.getDetail(`${id}`);
        props.getDetailList('1','1000',`${id}`);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    const tabChange = (id:number) =>{
        props.getDetail(`${id}`);
        props.getDetailList('1','1000',`${id}`);
    }
    const { brotherCategory,data,currentCategory} = props;
    const newBrotherCategory = brotherCategory&&brotherCategory.map((item:any)=>{return {...item,title:item.name}});
    return <div className={style.category}>
        <WrapHeader title="奇趣分类" />
        <div className={style.nav}>
            <Tabs tabs={newBrotherCategory}
                initialPage={0}
                onTabClick={(tab) =>  tabChange(tab.id)}
            >
            </Tabs>
        </div>
        <div className={style.message}>
            <p>{currentCategory.name}</p>
            <p>{currentCategory.front_name}</p>
        </div>
        <div className={style.content}>
            <WrapNewGoods newGoodsList={data} titleFlag={false}/>
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.category
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getDetail: (id: string) => {
            dispatch(categoryDetail(id));
        },
        getDetailList: (page?:string,size?:string,categoryId?:string) => {
            dispatch(categoryDetailList(page,size,categoryId));
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Cart) 
